<template>
	<scroll-view class="pages" :scroll-y="!priceShow">
		<h-nav-bar-yun title="孕产跟踪" :fixed="true" @clickLeft="clickLeft"></h-nav-bar-yun>
		<view class="section">
			<view class="sec_title">价格设置</view>
			<view class="sec_ti">
				<image src="@/static/index/tishi.png"></image>孕产跟踪价格一年只能修改2次，请谨慎操作
			</view>
			<view class="sec_table">
				<view class="sec_table_top">
					<view class="sec_table_td" style="border-left: none;width:175rpx;">服务项目</view>
					<view class="sec_table_td" style="width:176rpx;">服务项目</view>
					<view class="sec_table_td" style="width:173rpx;">服务时长</view>
					<view class="sec_table_td" style="width:172rpx;">价格(元/天)</view>
				</view>
				<view class="sec_table_list" v-for="(item, index) in fwList" :key="index">
					<view class="sec_table_list_tr flex_line" v-show="index == 0">
						<view class="sec_table_td">{{ item.group_name }}</view>
						<view class="sec_table_list_ra">
							<view class="flex_line sec_table_list_r">
								<view class="sec_table_td" style="border-left: none">{{ item.child[0].serviceName }}</view>
								<view class="sec_table_td">
									<!--<view class="sec_table_td_input" @click="toPrtce(index, indexs, items)">{{ items.unitPrice }}
									</view>-->
									<input class="sec_table_td_input" type="number" :value="item.child[0].serviceWeek" @input="onFreeInput" />
								</view>
								<view class="sec_table_td">0</view>
							</view>
						</view>
					</view>
					<view class="sec_table_list_tr flex_line" v-show="index > 0">
						<view class="sec_table_td">{{ item.group_name }}</view>
						<view class="sec_table_list_ra">
							<view v-for="(items, indexs) in item.child" :key="indexs" class="flex_line sec_table_list_r" :style="{height:(item.child.length==1?'100%':'')}">
								<view class="sec_table_td" style="border-left: none">{{ items.serviceName }}</view>
								<view class="sec_table_td">{{ items.serviceWeek }}</view>
								<view class="sec_table_td">
									<view class="sec_table_td_input" @click="toPrtce(index, indexs, items)">{{ items.unitPrice }}
									</view>
								</view>
							</view>
						</view>
					</view>
					
				</view>
			</view>
		</view>
		<h-line height="20" bgColor="#F5F6F8"></h-line>
		<view class="section">
			<view class="sec_title">价格配置说明</view>
			<view class="sec_explain">
				<view class="sec_explain_l">1、孕产跟踪提供的服务内容有3类：孕期咨询、产后康复咨询、新生儿咨询，各自对应的价格如表格所示；</view>
				<view class="sec_explain_l">2、价格配置时，单位为“元/天”，价格配置时，建议组合售卖时的价格大于等于单独购买时的价格，价格配置最多到小数点后一位；</view>
				<view class="sec_explain_l">3、免费咨询是服务时长单位为“天”，若配置大于0的数值，则展示对应的免费咨询时长，若不配置，则不展示，配置数值需要为整数，不可以配置小数；</view>
				<view class="sec_explain_l">4、各个“组合x”，若配置组合中的一项，则需要配置组合中剩余的内容，否则无法保存；</view>
				<view class="sec_explain_l">5、各条数据，配置价格则表示提供该项服务，患者端展示，可购买，不配置则不提供服务，也不展示，无法购买，配置价格为0时，代表免费提供该项服务，请谨慎配置；</view>
				<view class="sec_explain_l">6、月卡和次卡，对应的服务内容不限制，可以是孕期、产后、新生儿的任意服务，若配置则提供该项服务，不配置患者无法购买；</view>
				<view class="sec_explain_l">7、价格配置后，平台会根据配置的价格，乘以对应服务的时长，计算该项服务的总价展示给用户，例如：配置了组合1，孕期1元/天，产后1.5元/天，新生儿1元/天，组合1的最终售卖价格为530元（1*41周*7天+1.5*42天+1*180天），其他同理；</view>
			</view>
		</view>
		<h-line :height="bottoms+112"></h-line>
		<view class="foot">
			<view class="foot_btn" @click="submit">完成</view>
			<h-line :height="bottoms"></h-line>
		</view>
	</scroll-view>
	<h-num-keyboard-new @touchmove.stop.prevent="moveHandle" :show="priceShow" :num="mealNum" @bind="bindNum" @clear="clearNum"></h-num-keyboard-new>
	<h-modal :show="saveShow" titlea="修改内容未保存" leftBtn="直接离开" rightBtn="保存后离开" @clear="navigateBack()" @bind="submit"></h-modal>
</template>

<script setup lang="ts">
	import { ref, reactive, nextTick } from 'vue'
	import { formatDate } from '@/utils/utils'
	import { getDoctorQuoteDetails, getDoctorQuoteAdd } from '@/api/business'
	import { navigateTo, showToast, navigateBack, redirectTo } from '@/utils'
	import {
		onLoad,
		onPullDownRefresh,
		onReachBottom,
		onReady,
		onShow,
		onPageScroll,
		onUnload,
		onHide,
		onBackPress,
	} from '@dcloudio/uni-app'
	import { uploadApi } from '@/utils/upLoad'
	import { useMemberStore } from '@/stores'
	const login = ref(null) // 登录组件实例
	const store = useMemberStore()
	let token = store?.token
	let props = defineProps({
		setType: String,
	})
	const fwList = ref([])
	const freeTime = ref('')
	const statusHeight = ref(0)
	const lIndex = ref(0)
	const dIndex = ref(0)
	const priceShow = ref(false)
	const mealNum = ref('')
	const isUpdate = ref(false)
	const saveShow = ref(false)
	const bottoms = ref(0)
	onLoad((o) => {
		getList()
	})
	onShow(() => {})
	onReady(() => {
		uni.getSystemInfo({
			success: (e) => {
				statusHeight.value = e.statusBarHeight * 2
				bottoms.value = e.safeAreaInsets.bottom*2
			},
		})
	})
	async function getList() {
		const res = await getDoctorQuoteDetails()
		fwList.value = res.data
	}

	function clickLeft() {
		if(isUpdate.value) {
			saveShow.value = true
		} else {
			navigateBack()
		}
	}

	function onFreeInput(e) {
		fwList.value[0].child[0].serviceWeek = e.detail.value
		freeTime.value = e.target.value
		isUpdate.value = true
	}

	function toPrtce(index, indexs, row) {
		lIndex.value = index
		dIndex.value = indexs
		mealNum.value = row.unitPrice
		priceShow.value = true
	}

	function clearNum() {
		priceShow.value = false
	}

	function moveHandle() {
		return false
	}

	function bindNum(e) {
		if(Number(e)==0){
			showToast("价格不能设置为0元")
			return false;
		}
		fwList.value[lIndex.value].child[dIndex.value].unitPrice = e
		priceShow.value = false
		isUpdate.value = true
	}
	async function submit() {
		const res = await getDoctorQuoteAdd({
			service_data: fwList.value,
			type: 1,
		})
		if(res.code == 200) {
			navigateBack()
			uni.setStorageSync('priceSet', true)
			uni.setStorageSync('priceSetId', 1)
		} else {
			showToast(res.message)
		}
	}
</script>

<style>
	page {
		background: #fff;
	}
</style>
<style lang="scss" scoped>
	.over_page {
		height: 98vh !important;
		overflow: hidden !important;
	}
	
	.flex {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	
	.flex_cen {
		display: flex;
		flex-direction: row;
		/* 子元素横向排列 */
		justify-content: center;
		/* 相对父元素水平居中 */
		align-items: center;
	}
	
	.flex_line {
		display: flex;
		flex-direction: row;
		/* 子元素横向排列 */
		justify-content: center;
		/* 相对父元素水平居中 */
		align-items: stretch;
	}
	
	.clear:after {
		/*START 真正起到清除浮动的代码*/
		content: '';
		display: block;
		clear: both;
		/*END 真正起到清除浮动的代码*/
		height: 0;
	}
	
	.clear {
		display: inline-block;
	}
	
	.left {
		float: left;
	}
	
	.right {
		float: right;
	}
	
	.section {
		overflow: hidden;
		box-sizing: border-box;
		padding: 10rpx 24rpx;
		.sec_title {
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #202020;
			line-height: 42rpx;
			text-align: left;
			font-style: normal;
			padding: 10rpx 0;
		}
		.sec_ti {
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: #f5a520;
			line-height: 37rpx;
			padding: 10rpx 0;
			image {
				width: 26rpx;
				height: 26rpx;
				margin: 0 6rpx;
				position: relative;
				top: 4rpx;
			}
		}
		.sec_table_top {
			width: 698rpx;
			height: 76rpx;
			background: #f5f6f8;
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			.sec_table_td {
				width:174.5rpx;
				text-align: center;
				padding: 20rpx 0 !important;
				line-height: 34rpx;
				float: left;
				color: #5C5C5C !important;
				box-sizing: border-box;
				border-left: 1rpx solid #5C5C5C;
				border-bottom: 1rpx solid #5C5C5C;
			}
		}
		.sec_table {
			width: 702rpx;
			margin-bottom: 20rpx;
			box-sizing: border-box;
			border: 1rpx solid #5C5C5C;
			border-radius: 20rpx;
			.sec_table_list {
				.sec_table_list_tr {
					border-bottom: 1rpx solid #5C5C5C;
				}
				.sec_table_list_ra {
					border-left: 1rpx solid #5C5C5C;
					.sec_table_td {
						border-left: 1rpx solid #5C5C5C;
					}
				}
				.sec_table_list_r {
					border-bottom: 1rpx solid #5C5C5C;
				}
				.sec_table_list_r:last-of-type {
					border-bottom: none;
				}
				.sec_table_list_tr>.sec_table_td {
					width:174rpx;
				}
				.sec_table_list_ra {
					width: 522rpx;
					.sec_table_td {
						width: 174rpx;
					}
				}
			}
			.sec_table_list:last-of-type {
				.sec_table_list_tr {
					border-bottom: none;
				}
			}
			.set_table_th {
				border-bottom: none !important;
				border-left: 1rpx solid #5C5C5C;
			}
			.sec_table_td {
				text-align: center;
				padding: 15rpx 10rpx;
				line-height: 34rpx;
				box-sizing: border-box;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #202020;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				text-align: center;
				.sec_table_td_input {
					width: 100%;
					height: 60rpx;
					background: #ffffff;
					border-radius: 10rpx;
					border: 1rpx solid #aaaaaa;
					margin: 0 auto;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #202020;
					text-align: center;
					line-height: 60rpx;
				}
			}
		}
		.sec_explain {
			.sec_explain_l {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #5c5c5c;
				line-height: 40rpx;
				padding-bottom: 30rpx;
			}
		}
	}
	
	.foot {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		background: #ffffff;
		.foot_btn {
			width: 702rpx;
			height: 88rpx;
			background: #00c1b9;
			border-radius: 48rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #ffffff;
			line-height: 88rpx;
			text-align: center;
			margin: 12rpx auto;
		}
	}
</style>